{% extends base.html %}

{% block head %}
<script type="text/javascript" src="/static/lib/csv.js/csv.js"></script>
<script type="text/javascript" src="/static/lib/marked/marked.js"></script>
<script type="text/javascript" src="/static/js/marked-ext.js"></script>
<style>
.CodeMirror {
    width: 60rem;
    font-size:16px;
    height: auto;
}

#markdown-input {
    font-family: monospace;
}

</style>
{% end %}

{% block body %}
    {% init path = "" %}

    <div>
        <span id="result" style="color:green"></span>
    </div>
    <div>
        <div class="col-md-12">
        {% if _is_admin and type == "file" and path != "" %}
            <a class="link" href="/code/view_source?path={{path}}">[编辑]</a>
        {% elif _is_admin and type == "dir" %}
            <a href="/wiki/add?type=file&target={{name}}">[添加文件]</a>
            <a href="/wiki/add?type=dir&target={{name}}">[添加目录]</a>
        {% end %}
        </div>
    </div>
    {% if type == "file" or has_readme %}
        <div style="padding-top:20px;">
            <div id="epiceditor" class="row">
                <div id="markdown-input-div" class="col-md-6">
                    <textarea id="markdown-input" class="form-control" name="content" rows=50>{{?content}}</textarea>
                </div>

                <div id="markdown-output-div" class="col-md-12">

                </div>
            </div>
        </div>
    {% end %}
    
    
<div style="float:left;width:100%;">

<script>
    function preview() {
        if (!$("#markdown-input-div").hasClass("hide")) {
            $("#markdown-input-div").addClass("hide");
            $("#markdown-output-div").removeClass("col-md-6").addClass("col-md-12");
        }
    }

    $(function () {
        var old_content = $("#markdown-input-div").val();
        setInterval(function () {
            var input = $("#markdown-input").val();
            // not modified
            if (input == old_content) {
                return;
            }
            old_content = input;
            
            marked.showMenu = false;
            $("#markdown-output-div").html(marked.parse(input));
        }, 200);
        preview();
    })
</script>

{% end %}